<template>
  <Layout class="my-layout">
    <template v-if="!route.meta.prue">
      <LayoutSider collapsible :collapsed="collapsed"
      width="224"
      class="my-sider fixed top-0 left-0"
      >
      <div class="my-sider-children bg-white">
        <div class="blog-sider-title ">Blog Admin</div>
        <div class="w-[200px] h-[2px] ml-auto mr-auto bg-gray-50"></div>
        <Menu
          v-model:selectedKeys="selectedKeys"
          style="width: 224px"
          mode="inline"
          :items="menuList"
          @click="handleClick"
        />
      </div>
      </LayoutSider>
      <Layout >
        <LayoutContent class="my-content overflow-y-auto max-h-[100vh]">
          <RouterView />
        </LayoutContent>
      </Layout>
    </template>
    <template v-else>
      <router-view />
    </template>
  </Layout>
</template>
<script lang="ts" setup>

import { Layout ,LayoutSider,LayoutContent, Menu,type ItemType, Button} from 'ant-design-vue';

import { computed, onMounted, ref } from 'vue';
import { RouterView } from 'vue-router';
import {type MenuItem, menus} from '../router';
import { useRoute, useRouter } from 'vue-router';


const route = useRoute()
const router = useRouter()

const collapsed = ref<boolean>(false);

// 菜单列表
const menuList = computed(()=>menus as ItemType[])
const selectedKeys = ref([route.path])
console.log(11,selectedKeys.value)
onMounted(()=>{
  // 加载 用户信息
  // TODO:
  console.log('123:',route.path)


})

const handleClick = (e:any)=>{
  router.push({path:e.key})
}

</script>
<style lang="less">
.blog-sider-title{
  height: 73px;
  width: 224px;
  text-align: center;
  background-color: #FFFFFF;
  font:24px/73px Pacifico;
}
  .my-layout{
    min-height: 100vh;
  }
  .my-sider{
    margin-right: 15px;
    .my-sider-children{
      height: 100%;
    }
  }
  .my-content{
    width: 100%;
    margin:10px auto;
  }
</style>